<!--
 * @Date: 2022-04-06 19:07:00
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-04-24 15:31:08
 * @FilePath: \weibovue\src\components\headerBG.vue
 * @Description: something
-->
<template>
  <div class="bgContainer">
    <div class="drowdown" @click="go">
      <i class="iconfont icon-jiantou_yemian_xiangxia"></i>
    </div>
    <div class="writer">
      <typeWriter :str="typewriter"></typeWriter>
    </div>
    <img src="../assets/image/bgimg.jpg" alt="" />
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import typeWriter from "./typeWriter.vue";
const typewriter = ref([
  "敏而好学，不耻下问",
  "少年易学老难成，一寸光阴不可轻",
  "嘿嘿嘿~前端来了!!!",
]);
const go = () => {
  // console.log(123);

  document.querySelector("html")!.scrollTo({
    left: 0,
    top: 910,
    behavior: "smooth",
  });
};
</script>
<style lang="less" scoped>
.bgContainer {
  position: relative;
  height: 100vh;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .drowdown {
    position: absolute;
    bottom: 60px;
    width: 200px;
    margin: auto;
    display: flex;
    cursor: pointer;
    justify-content: center;
    left: 0;
    right: 0;
    text-transform: uppercase;
    animation: pulse 2s infinite;
    i {
      font-size: 100px;
      color: rgb(255, 255, 255);

      text-shadow: 0px 0px 15px #9febeb, 0px 0px 15px #9febeb,
        0px 0px 15px #9febeb;
      &:hover {
        color: #9febeb;
      }
    }
  }
  .writer {
    width: 100%;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -30%);
    font-size: 40px;
    // font-family: Consolas, Monaco;
    font-family: sans-serif;
    color: #fff;
    letter-spacing: 0.2rem;
    font-size: 4rem;
    text-shadow: 1px 1px 0 #ff3f1a, -1px -1px 0 #00a7e0;
  }
}

@keyframes pulse {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 15px);
  }
  100% {
    transform: translate(0, 0);
  }
}
</style>
